<template>
  <div class="ordinaryuserContent">
    <header
      :style="{
        backgroundColor:
          i == '0'
            ? beijingThem0
            : i == '1'
            ? beijingThem1
            : i == '2'
            ? beijingThem2
            : i == '3'
            ? beijingThem3
            : 'rgb(9, 39, 68)',
      }"
    >
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoshizi"></use>
        </svg>
        欢迎使用学生学科管理系统
      </span>
      <ul class="subject">
        <!-- <li>
          <router-link :to="{ name: 'HomePage' }" exact>首页 </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Subject' }">学科 </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'Read' }">统计 </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'UserProgram' }">项目 </router-link>
        </li> -->
        <li
          v-for="(msgs, index) in items"
          :key="index"
          @click="changeStyle(index)"
        >
          <router-link
            :to="{ name: msgs.path }"
            :class="{ active: is == index }"
          >
            {{ msgs.msg }}
          </router-link>
        </li>
      </ul>
      <!-- 个人信息 -->
      <msg-button
        class="user"
        @click="drawer = true"
        type="text"
        style="margin-left: 16px"
      >
        <div class="demo-type demo">
          <div>
            <el-avatar :src="imageUrl"></el-avatar>
            <!-- <img :src="imageUrl" /> -->
          </div>
        </div>
      </msg-button>
      <msg-drawer
        :title="userformation[0].username"
        :visible.sync="drawer"
        :direction="direction"
        :size="size"
        :style="title"
      >
        <!-- 个人信息完善页面 -->
        <div class="formation">
          <div @click="userInfo()">
            <svg class="icon icon1" aria-hidden="true">
              <use xlink:href="#icon-icoyonghuming"></use></svg
            >个人档案
          </div>
          <div @click="updatapassword">
            <svg class="icon icon1" aria-hidden="true">
              <use xlink:href="#icon-mima"></use></svg
            >更改密码
          </div>
          <div
            class="them"
            @mouseenter="thems = true"
            @mouseleave="thems = false"
          >
            <svg class="icon icon1" aria-hidden="true">
              <use xlink:href="#icon-wawa"></use></svg
            >主题
            <ul v-if="thems">
              <li
                v-for="(item, index) in colorThem"
                :key="index"
                @click="colorThemBtn(index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div>
            <svg class="icon icon1" aria-hidden="true">
              <use xlink:href="#icon-gongjuxiang"></use></svg
            >帮助
          </div>
          <hr />
          <div class="exit" @click="exit">
            <svg class="icon icon1" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use></svg
            >退出
          </div>
        </div>
      </msg-drawer>
    </header>
    <router-view v-if="isRouterAlive"></router-view>
    <div class="delayBackground" v-show="visible">
      <Application
        :visible.sync="visible"
        :isShow="false"
        :notShow="false"
        :updatapass="updatapass"
      ></Application>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Application from "@/pages/ordinaryuser/Application.vue";
export default {
  name: "Ordinaryuser",
  components: { Application },
  data() {
    return {
      is: null,
      isRouterAlive: true,
      items: [
        { msg: "首页", path: "UHomePage" },
        { msg: "学科", path: "Subject" },
        { msg: "统计", path: "Levelstatistics" },
        { msg: "项目", path: "UserProgram" },
      ],
      //个人信息element-ui参数
      drawer: false,
      direction: "rtl",
      size: "170px",
      title: {
        top: "60px",
        height: "500px",
        "font-size": "14px",
      },
      //更改密码
      updatapass: null,
      visible: false,
      //主题
      thems: false,
      colorThem: ["深色", "芙蕖粉", "叶兰绿", "经典蓝"],
      i: window.localStorage.getItem("color"),
      beijingThem0: "rgb(9, 39, 68)",
      beijingThem1: "pink",
      beijingThem2: "rgb(0, 200, 145)",
      beijingThem3: "rgb(0, 53, 117)",
      imageUrl: "",
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  watch: {
    $route(to, from) {
      this.is = localStorage.getItem("index");
    },
  },
  computed: {
    ...mapState("LoginData", ["userformation"]),
  },
  methods: {
    changeStyle(index) {
      window.localStorage.setItem("index", index);
      this.is = index;
    },
    // 用户个人信息页面
    userInfo() {
      this.drawer = false;
      this.$router.push({
        name: "UserInfo",
      });
    },
    //点击退出，返回到登录页面
    exit() {
      let id = this.$store.state.LoginData.userformation[0].id;
      this.$http({
        method: "post",
        url: `user/logOut?id=${id}`,
      }).then(({ data }) => {
        if (data.flag) {
          window.localStorage.clear();
          localStorage.index = 0;
          this.$router.push({ name: "login" });
        } else {
          console.log(data);
        }
      });
    },
    //局部刷洗
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    //更改密码
    updatapassword() {
      this.visible = true;
      this.drawer = false;
      this.updatapass = true;
    },
    //主题
    colorThemBtn(index) {
      this.i = index;
      window.localStorage.setItem("color", index);
    },
  },
  mounted() {
    this.$bus.$on("avatar", (data) => {
      this.imageUrl = data;
    });

    // 页面挂载判断是否有头像
    // if (
    //   this.userformation[0].url != null ||
    //   localStorage.getItem("userAvatar")
    // ) {
    //   if (localStorage.getItem("userAvatar")) {
    //     this.imageUrl = localStorage.getItem("userAvatar");
    //   } else {
    //     this.imageUrl = "http://" + this.userformation[0].url;
    //   }
    // } else {
    this.imageUrl =
      "http://raexshntn.hn-bkt.clouddn.com/8483ceee-402d-4d9d-82f8-98ac2737c3d8";
    // }

    const index = window.localStorage.getItem("index");
    this.is = index;
  },
};
</script>
<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
// .active {
//   color: black !important;
//   height: 100%;
//   background-color: #eee;
// }
.router-link-active {
  color: black !important;
  height: 100%;
  background-color: #eee;
}
.ordinaryuserContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #eee;
  .Item,
  .UserProgram,
  .box {
    flex: 1;
  }
  .delayBackground {
    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 98;

    background-color: rgba(0, 0, 0, 0.5);
  }
  header {
    position: relative;
    height: 60px;
    padding: 0 30px;
    line-height: 60px;
    font-size: 20px;
    span {
      color: #fff;
    }
    .subject {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -212px;
      display: flex;
      width: 424px;
      li {
        a {
          color: #fff;
          border-right: 2px solid #fff;
          padding: 0px 15px;
        }
      }
    }
    .user {
      position: absolute;
      top: 15px;
      right: 80px;
      cursor: pointer;
      .demo {
        position: absolute;
        top: -5px;
      }
    }
  }
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.6em;
  }
  .icon1 {
    margin-right: 0.5em;
  }
  .formation {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
    .exit {
      font-weight: 700;
      line-height: 30px;
      margin-top: 5px;
    }
    .them {
      position: relative;
      ul {
        position: absolute;
        top: 60px;
        left: 0;
        padding: 0;
        height: 100px;
        overflow: auto;
        width: 127px;
        background-color: #eee;

        border-top: 1px solid grey;
        box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
        margin: 0;
        text-align: center;
        li {
          &:hover {
            background-color: wheat;
          }
        }
      }
    }
  }
}
.icon-ziyuanxhdpi:before {
  font-size: 30px;
  color: #fff;
}
</style>